<template>
  <div class="relative min-h-screen w-full flex justify-center items-center flex-col max-w-lg m-auto">
    <transition name="slide-down" :appear="!!totalTime">
      <button 
        v-show="!!totalTime"
        class="reset-button p-3 bg-neutral text-white rounded-3xl absolute left-1/2 top-10"
        @click="onReset">
        <svg xmlns="http://www.w3.org/2000/svg" 
          class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </transition>
    <div class="absolute top-[20%] left-1/2 -translate-x-1/2 -translate-y-1/2">
      <TimeRecord ref="tRecordRef" />
    </div>

    <div class="sign-button rounded-full relative flex justify-center items-center
      text-4xl font-bold tracking-widest text-slate-100 shadow-lg cursor-pointer"
      @click="onSign">
      <transition name="scale-in">
        <span class="sign-text" v-show="!sighAnimate">{{ signText }}</span>
      </transition>
      <transition name="slide-up">
        <Right v-show="sighAnimate" class="icon-right" height="50" width="50" />
      </transition>
    </div>

    <div class="w-full px-5 absolute bottom-10 space-y-5">
      <button class="btn btn-block" @click="onOpenRecord">打卡记录</button>
      <!-- <button class="btn btn-block">手动计算</button> -->
    </div>
  </div>
  <RecordPanne ref="panneRef" />
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { 
      Status,
      getStatus,
      getTime,
      updateStatus,
      addRecord,
      STATUS_REST,
      resetRecord,
      resetStatus,
      resetTime
  } from './storage'
  import Right from './components/icons/right.vue'
  import RecordPanne, { RecordPanneType } from './components/record_panne/index.vue'
  import TimeRecord, { TimeRecordType } from './components/time_record/index.vue'

  const totalTime = ref(getTime())
  const signStatus = ref<Status>(getStatus())
  const sighAnimate = ref(false)
  const tRecordRef = ref<TimeRecordType>()
  const panneRef = ref<RecordPanneType>()
  const signText = computed(() => signStatus.value === STATUS_REST ? '上班' : '下班')

  const onSign = () => {
    if (sighAnimate.value) {
      return
    }
    sighAnimate.value = true

    const curStatus = +!signStatus.value
    // 切换状态
    // @ts-ignore
    updateStatus(curStatus)
    addRecord({ 
      // @ts-ignore
      status: curStatus,
      timeStamp: Date.now()
    })
    tRecordRef.value?.update((time: number) => {
      totalTime.value = time
    })

    setTimeout(() => {
      sighAnimate.value = false
      // @ts-ignore
      signStatus.value = curStatus
    }, 2000)
  }

  const onOpenRecord = () => {
    panneRef.value?.show()
  }

  // 重置所有数据
  const onReset = () => {
    resetRecord()
    resetStatus()
    resetTime()
    totalTime.value = 0
    signStatus.value = STATUS_REST
    tRecordRef.value?.reset()
  }
</script>

<style scoped>
  .sign-button {
    height: 50vw;
    width: 50vw;
    max-width: 200px;
    max-height: 200px;
    background-image: linear-gradient(120deg, rgb(26, 241, 215), rgb(24, 208, 242));
    z-index: 10;
  }
  .sign-button::after {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    height: 110%;
    width: 110%;
    border: 2px solid rgb(26, 241, 215);
    animation: bounce 1.5s infinite;
    transition: all 0.3s;
    @apply rounded-full;
  }

  .sign-button:hover {
    box-shadow: none;
  }

  .icon-right {
    fill: #fff;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate3d(-50%, 50%, 0);
    opacity: 1;
  }

  .sign-text {
    opacity: 1;
    transform: scale(1);
  }

  .reset-button {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  @keyframes bounce {
    0%, 100% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .slide-up-enter-active,
  .slide-up-leave-active {
    transition: all 0.5s ease;
  }

  .slide-up-enter-from,
  .slide-up-leave-to {
    transform: translate3d(-50%, 100%, 0);
    bottom: 0;
    opacity: 0;
  }

  .scale-in-enter-active,
  .scale-in-leave-active {
    transition: all .6s ease;
  }

  .scale-in-enter-from,
  .scale-in-leave-to {
    transform: scale(0.7);
    opacity: 0;
  }

  .slide-down-enter-active,
  .slide-down-leave-active {
    transition: all .3s ease;
  }

  .slide-down-enter-from,
  .slide-down-leave-to {
    transform: translate3d(-50%, -100%, 0);
    opacity: 0;
  }
</style>
